<template>
	<div class="mineMusicContent">
		<div class="middleCircle">
			<img src="../images/musiccircle.png" />
		</div>
		<div class="circle1"></div>
		<div class="circle2"></div>
		<div class="circle3"></div>
		<div class="circle4"></div>
		<div class="circle5"></div>
		<div class="mineMusic" v-if="!!singer">
			<div class="minecircle1">
				<div>
					<img @click="songerM1" :src="singerImg1.avatar_big" alt="" />
				</div>
				<p>{{singerImg1.name}}</p>
			</div>
			<div class="minecircle2">
				<div>
					<img @click="songerM2" :src="singerImg2.avatar_middle" alt="" />
				</div>
				<p>{{singerImg2.name}}</p>
			</div>
			<div class="minecircle3">
				<div>
					<img @click="songerM3" :src="singerImg3.avatar_big" alt="" />
				</div>
				<p>{{singerImg3.name}}</p>
			</div>
			<div class="minecircle4">
				<div>
					<img @click="songerM4" :src="singerImg4.avatar_big" alt="" />
				</div>
				<p>{{singerImg4.name}}</p>
			</div>
			<div class="minecircle5">
				<div>
					<img @click="songerM5" :src="singerImg5.avatar_big" alt="" />
				</div>
				<p>{{singerImg5.name}}</p>
			</div>
		</div>
	</div>
</template>

<script>
	import jsonp from "jsonp";
	export default {
		data() {
			return {
				singer:"",
			}
		},
		methods:{
			songerM1(){
				this.$router.push("/songerM3");
				this.$store.commit("singerId",this.singer.artist[0].ting_uid);
			},
			songerM2(){
				this.$router.push("/songerM3");
				this.$store.commit("singerId",this.singer.artist[1].ting_uid);
			},
			songerM3(){
				this.$router.push("/songerM3");
				this.$store.commit("singerId",this.singer.artist[2].ting_uid);
			},
			songerM4(){
				this.$router.push("/songerM3");
				this.$store.commit("singerId",this.singer.artist[3].ting_uid);
			},
			songerM5(){
				this.$router.push("/songerM3");
				this.$store.commit("singerId",this.singer.artist[4].ting_uid);
			},
		},
		computed:{
			singerImg1(){
				return this.singer.artist[0];
			},
			singerImg2(){
				return this.singer.artist[1];
			},
			singerImg3(){
				return this.singer.artist[2];
			},
			singerImg4(){
				return this.singer.artist[3];
			},
			singerImg5(){
				return this.singer.artist[4];
			}
		},
		created() {
			var nowTime = new Date().getTime(); 
			if(sessionStorage.singer) {
				var tem = JSON.parse(sessionStorage.singer);
				if(nowTime - tem.expir < 3600000) {
					this.singer = tem.data;
					return;
				}
			}
			jsonp("http://tingapi.ting.baidu.com/v1/restserver/ting?from=qianqian&version=2.1.0&method=baidu.ting.artist.get72HotArtist&format=jsonℴ=1&offset=0&limit=5", null, (err, res) => {
				if(err) {
					console.log(err)
					if(tem) {
						this.singer = tem.data;
					}

				} else {
					sessionStorage.singer = JSON.stringify({
						"data": res,
						"expir": new Date().getTime()
					});
					this.singer = res;
				}
			})
		},
		mounted() {
			
		},
		
	}
</script>

<style scoped lang="scss">
	@import "../scss/utils";
	.mineMusicContent {
		position: relative;
		height: 80%;
		.middleCircle {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			width: 75px;
			height: 75px;
			border-radius: 50%;
			background: #af3db1;
			@include aImg;
			img {
				width: 50%;
			}
		}
		.circle1 {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			border-radius: 50%;
			border: 1px solid #cb7cc8;
			width: 265px;
			height: 265px;
			animation: circle1 3s infinite reverse linear;
			@-webkit-keyframes circle1 {
				0% {
					-webkit-transform: translate(-50%, -50%);
				}
				25% {
					-webkit-transform: translate(-51%, -49%);
				}
				50% {
					-webkit-transform: translate(-52%, -50%);
				}
				75% {
					-webkit-transform: translate(-51%, -51%);
				}
				100% {
					-webkit-transform: translate(-50%, -50%);
				}
			}
		}
		.circle2 {
			position: absolute;
			top: 50%;
			left: 49%;
			transform: translate(-50%, -50%);
			border-radius: 50%;
			border: 1px solid #dda8da;
			width: 245px;
			height: 245px;
			animation: circle2 3s infinite reverse linear;
			@-webkit-keyframes circle2 {
				0% {
					-webkit-transform: translate(-50%, -49%);
				}
				25% {
					-webkit-transform: translate(-51%, -48%);
				}
				50% {
					-webkit-transform: translate(-52%, -49%);
				}
				75% {
					-webkit-transform: translate(-51%, -50%);
				}
				100% {
					-webkit-transform: translate(-50%, -49%);
				}
			}
		}
		.circle3 {
			position: absolute;
			top: 50%;
			left: 49%;
			transform: translate(-50%, -50%);
			border-radius: 50%;
			border: 1px solid #bc51b5;
			width: 260px;
			height: 260px;
			animation: circle3 3s infinite reverse linear;
			@-webkit-keyframes circle3 {
				0% {
					-webkit-transform: translate(-50%, -49%);
				}
				25% {
					-webkit-transform: translate(-49%, -48%);
				}
				50% {
					-webkit-transform: translate(-48%, -49%);
				}
				75% {
					-webkit-transform: translate(-49%, -48%);
				}
				100% {
					-webkit-transform: translate(-50%, -49%);
				}
			}
		}
		.circle4 {
			position: absolute;
			top: 50%;
			left: 51%;
			transform: translate(-50%, -50%);
			border-radius: 50%;
			border: 1px solid #cd7cc7;
			width: 280px;
			height: 280px;
			animation: circle4 3s infinite reverse linear;
			@-webkit-keyframes circle4 {
				0% {
					-webkit-transform: translate(-50%, -50%);
				}
				25% {
					-webkit-transform: translate(-51%, -49%);
				}
				50% {
					-webkit-transform: translate(-52%, -50%);
				}
				75% {
					-webkit-transform: translate(-51%, -51%);
				}
				100% {
					-webkit-transform: translate(-50%, -50%);
				}
			}
		}
		.circle5 {
			position: absolute;
			top: 48%;
			left: 48%;
			transform: translate(-50%, -50%);
			border-radius: 50%;
			border: 1px solid #bf51b1;
			width: 300px;
			height: 300px;
			animation: circle5 3s infinite reverse linear;
			@-webkit-keyframes circle5 {
				0% {
					-webkit-transform: translate(-48%, -48%);
				}
				25% {
					-webkit-transform: translate(-47%, -47%);
				}
				50% {
					-webkit-transform: translate(-46%, -48%);
				}
				75% {
					-webkit-transform: translate(-47%, -49%);
				}
				100% {
					-webkit-transform: translate(-48%, -48%);
				}
			}
		}
		.mineMusic {
			width: 300px;
			height: 300px;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			.minecircle1 {
				width: 100px;
				position: absolute;
				text-align: center;
				left: 50%;
				top: -8%;
				overflow: hidden;
				div {
					width: 100px;
					height: 100px;
					border-radius: 50%;
					@include aImg;
				}
			}
			.minecircle2 {
				position: absolute;
				text-align: center;
				left: -3%;
				top: 18%;
				overflow: hidden;
				width: 70px;
				div {
					width: 70px;
					height: 70px;
					border-radius: 50%;
					@include aImg;
				}
			}
			.minecircle3 {
				position: absolute;
				text-align: center;
				overflow: hidden;
				width: 100px;
				left: 0%;
				top: 60%;
				div {
					width: 100px;
					height: 100px;
					border-radius: 50%;
					@include aImg;
				}
			}
			.minecircle4 {
				position: absolute;
				text-align: center;
				overflow: hidden;
				width: 80px;
				left: 55%;
				top: 73%;
				div {
					width: 80px;
					height: 80px;
					border-radius: 50%;
					@include aImg;
				}
			}
			.minecircle5 {
				position: absolute;
				text-align: center;
				left: 80%;
				top: 30%;
				width: 70px;
				overflow: hidden;
				div {
					width: 70px;
					height: 70px;
					border-radius: 50%;
					@include aImg;
				}
			}
			p {
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}
	}
</style>